<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const localePath = useLocalePath()

const { t } = useI18n()

// 页脚链接
const footerLinks = computed(() => [
  { label: t('home'), to: localePath('/') },
  { label: t('about'), to: localePath('/about') },
  { label: t('services'), to: localePath('/services') },
  { label: t('portfolio'), to: localePath('/portfolio') },
  { label: t('blog'), to: localePath('/blog') },
  { label: t('contact'), to: localePath('/contact') },
])

// 服务列表
// const services = computed(() => [
//   t('services.web_development'),
//   t('services.app_development'),
//   t('services.ui_ux_design'),
//   t('services.seo_optimization'),
//   t('services.digital_marketing')
// ])
</script>

<template>
  <footer class="bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
    <div class="container mx-auto px-4 py-8">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <!-- 公司信息 -->
        <div class="md:col-span-1">
          <div class="flex items-center space-x-3 mb-4">
            <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center">
              <span class="text-white font-bold">N</span>
            </div>
            <span class="text-xl font-bold text-gray-900 dark:text-white">NuxtApp</span>
          </div>
          <p class="text-gray-600 dark:text-gray-400 mb-4">
            {{ $t('footer.description') }}
          </p>
          <div class="flex space-x-3">
            <!-- <UButton color="gray" variant="ghost" icon="i-heroicons-globe-alt" />
            <UButton color="gray" variant="ghost" icon="i-heroicons-facebook" />
            <UButton color="gray" variant="ghost" icon="i-heroicons-twitter" />
            <UButton color="gray" variant="ghost" icon="i-heroicons-github" /> -->
          </div>
        </div>

        <!-- 链接列表 -->
        <div>
          <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">
            {{ $t('footer.quick_links') }}
          </h3>
          <ul class="space-y-2">
            <li v-for="link in footerLinks" :key="link.label">
              <NuxtLink :to="link.to" class="text-gray-600 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400">
                {{ link.label }}
              </NuxtLink>
            </li>
          </ul>
        </div>

        <!-- 服务 -->
        <!-- <div>
          <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">{{ $t('footer.services') }}</h3>
          <ul class="space-y-2">
            <li v-for="service in services" :key="service">
              <NuxtLink to="/services" class="text-gray-600 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400">
                {{ service }}
              </NuxtLink>
            </li>
          </ul>
        </div> -->

        <!-- 联系方式 -->
        <div>
          <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">
            {{ $t('footer.contact') }}
          </h3>
          <ul class="space-y-3">
            <li class="flex items-start">
              <UIcon name="i-heroicons-map-pin" class="w-5 h-5 text-gray-500 dark:text-gray-400 mt-0.5 mr-2 flex-shrink-0" />
              <span class="text-gray-600 dark:text-gray-400">北京市朝阳区科技园区88号</span>
            </li>
            <li class="flex items-start">
              <UIcon name="i-heroicons-phone" class="w-5 h-5 text-gray-500 dark:text-gray-400 mt-0.5 mr-2 flex-shrink-0" />
              <span class="text-gray-600 dark:text-gray-400">+86 10 8888 8888</span>
            </li>
            <li class="flex items-start">
              <UIcon name="i-heroicons-envelope" class="w-5 h-5 text-gray-500 dark:text-gray-400 mt-0.5 mr-2 flex-shrink-0" />
              <span class="text-gray-600 dark:text-gray-400">contact@nuxtapp.com</span>
            </li>
            <li class="flex items-start">
              <UIcon name="i-heroicons-clock" class="w-5 h-5 text-gray-500 dark:text-gray-400 mt-0.5 mr-2 flex-shrink-0" />
              <span class="text-gray-600 dark:text-gray-400">周一至周五: 9:00 - 18:00</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 版权信息 -->
      <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400 text-sm">
        © {{ new Date().getFullYear() }} NuxtApp. {{ $t('footer.rights') }}
      </div>
    </div>
  </footer>
</template>
